@charset "utf-8";
@import "commom/reset";
@import "commom/common";
.web {
    header {
        padding-top: r(48px);
        text-align: center;
        .back {
            margin-left: r(23px);
            a {
                display: block;
                font-size: r(32px);
                color: #000000;
                width: r(123px);
                height: r(57px);
                border: r(3px) solid $color;
                border-radius: r(20px);
                text-align: center;
                line-height: r(57px);
            }
        }
        .letter {
            margin-top: 0;
            margin-right: r(18px);
            position: relative;
            a {
                display: block;
                width: r(62px);
                height: r(43px);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            em {
                display: block;
                width: r(28px);
                height: r(28px);
                border-radius: r(28px);
                background-color: #fa5050;
                font-size: r(20px);
                color: #FFFFFF;
                line-height: r(28px);
                position: absolute;
                top: r(-14px);
                right: 0;
            }
        }
        .title {
            font-size: r(26px);
            line-height: r(56px);
        }
    }
    main {
        width: 100%;
        overflow-y: scroll;
        position: absolute;
        top: r(125px);
        bottom: r(155px);
        .my_load {
            width: 100%;
            padding: 0 r(23px);
            .my_pic {
                width: r(170px);
                height: r(170px);
                border-radius: 50%;
                display: block;
                overflow: hidden;
                img {
                    width: 100%;
                    display: block;
                }
            }
            .my_text {
                width: r(512px);
                div {
                    margin-left: r(26px);
                    a {
                        display: block;
                        &:nth-child(1) {
                            font-size: r(30px);
                            color: #000000;
                            padding-top: r(34px);
                        }
                        &:nth-child(2) {
                            padding-top: r(38px);
                            font-size: r(26px);
                            color: #9d9d9d;
                        }
                    }
                }
                .dayu {
                    font-size: r(46px);
                    color: #000000;
                    margin-top: r(48px);
                }
            }
        }
        .mine_card {
            ul {
                margin-top: r(26px);
                padding: 0 r(23px);
                li {
                    float: left;
                    margin-right: r(50px);
                    &:nth-child(1) {
                        background-color: #b2e0a0;
                    }
                    &:nth-child(2) {
                        background-color: #a0dce0;;
                    }
                    &:nth-child(3) {
                        margin: 0;
                        background-color: #e0b7a0;
                    }
                    a {
                        display: block;
                        width: r(194px);
                        height: r(151px);
                        text-align: center;
                        padding-top: r(20px);
                        img {
                            display: block;
                            margin: 0 auto;
                        }
                        span {
                            display: block;
                            font-size: r(26px);
                            color: #000000;
                            margin-top: r(13px);
                        }
                        &:nth-child(1) {
                            img {
                                width: r(82px);
                                height: r(77px);
                            }
                        }
                        &:nth-child(2) {
                            img {
                                width: r(85px);
                                height: r(79px);
                            }
                        }
                        &:nth-child(3) {
                            img {
                                width: r(124px);
                                height: r(81px);
                            }
                        }
                    }
                }
            }
        }
        .wallet{
            width: 100%;
            padding-bottom: r(15px);
            padding-top: r(15px);
            .wallet_left{
                vertical-align: middle;
                img {
                    vertical-align: middle;
                    width: r(58px);
                    height: r(74px);
                    margin-left: r(21px);
                }
                span {
                    font-size: r(26px);
                    vertical-align: middle;
                    margin-left: r(37px);
                }
            }
            .wallet_right{
                margin-top: r(15px);
                img {
                    width: r(25px);
                    height: r(26px);
                    vertical-align: middle;
                    margin-right: r(21px);
                }
                span {
                    font-size: r(24px);
                    vertical-align: middle;
                }
            }
        }
        .comment{
            width: 100%;
            padding-bottom: r(15px);
            padding-top: r(15px);
            .comment_left{
                vertical-align: middle;
                img {
                    vertical-align: middle;
                    width: r(71px);
                    height: r(72px);
                    margin-left: r(21px);
                }
                span {
                    font-size: r(26px);
                    vertical-align: middle;
                    margin-left: r(26px);
                }
            }
            .comment_right{
                margin-top: r(15px);
                img {
                    width: r(25px);
                    height: r(26px);
                    vertical-align: middle;
                    margin-right: r(21px);
                }
                span {
                    font-size: r(24px);
                    vertical-align: middle;
                }
            }
        }
        .friend{
            width: 100%;
            padding-bottom: r(15px);
            padding-top: r(15px);
            .friend_left{
                vertical-align: middle;
                img {
                    vertical-align: middle;
                    width: r(96px);
                    height: r(58px);
                    margin-left: r(21px);
                }
                span {
                    font-size: r(26px);
                    vertical-align: middle;
                    margin-left: r(4px);
                }
            }
            .friend_right{
                margin-top: r(15px);
                img {
                    width: r(25px);
                    height: r(26px);
                    vertical-align: middle;
                    margin-right: r(21px);
                }
                span {
                    font-size: r(24px);
                    vertical-align: middle;
                }
            }
        }
        .foot{
            width: 100%;
            padding-bottom: r(15px);
            padding-top: r(15px);
            .foot_left{
                vertical-align: middle;
                img {
                    vertical-align: middle;
                    width: r(59px);
                    height: r(59px);
                    margin-left: r(21px);
                }
                span {
                    font-size: r(26px);
                    vertical-align: middle;
                    margin-left: r(36px);
                }
            }
            .foot_right{
                margin-top: r(15px);
                img {
                    width: r(25px);
                    height: r(26px);
                    vertical-align: middle;
                    margin-right: r(21px);
                }
                span {
                    font-size: r(24px);
                    vertical-align: middle;
                }
            }
        }
        .set{
            width: 100%;
            padding-bottom: r(15px);
            padding-top: r(15px);
            .set_left{
                vertical-align: middle;
                img {
                    vertical-align: middle;
                    width: r(78px);
                    height: r(79px);
                    margin-left: r(21px);
                }
                span {
                    font-size: r(26px);
                    vertical-align: middle;
                    margin-left: r(9px);
                }
            }
            .set_right{
                margin-top: r(15px);
                img {
                    width: r(25px);
                    height: r(26px);
                    vertical-align: middle;
                    margin-right: r(21px);
                }
                span {
                    font-size: r(24px);
                    vertical-align: middle;
                }
            }
        }
        .relation{
            width: 100%;
            padding-bottom: r(15px);
            padding-top: r(15px);
            .relation_left{
                vertical-align: middle;
                img {
                    vertical-align: middle;
                    width: r(84px);
                    height: r(59px);
                    margin-left: r(21px);
                }
                span {
                    font-size: r(26px);
                    vertical-align: middle;
                    margin-left: r(9px);
                }
            }
            .relation_right{
                margin-top: r(15px);
                img {
                    width: r(25px);
                    height: r(26px);
                    vertical-align: middle;
                    margin-right: r(21px);
                }
                span {
                    font-size: r(24px);
                    vertical-align: middle;
                }
            }
        }
        .button{
            padding: 0 r(110px);
            margin-top: r(21px);
            a{
                width: r(140px);
                height: r(76px);
                border-radius: r(38px);
                background-color: $color;
                font-size: r(24px);
                color: #FFFFFF;
                text-align: center;
                line-height: r(76px);
            }
        }
    }
}